<template>
  <div class="container">
    <common-header></common-header>
    <bread-crumb></bread-crumb>
    <div class="content">
      <div class="nav-box">
        <el-row class="tac">
          <el-col >
            <!-- 页面总分支名字 -->
            <div index="2" class="title">
                <span class="titlename">{{ currentNav }}</span>
            </div>
            <div class="vertical-demo">
              <ul class="vertical-demo-container">
                <li class="vertical-demo-content"
                    v-for="(item,index) in navs.subNavs" :key="index">
                  <router-link
                    @click.native="handleSubNavClick(item.title, currentNav)"
                    :class="{ active: navs.isActive }" class="subTitle"
                    tag="div" :to="{name: item.title}"
                    >{{item.title}}</router-link>
                  <ul v-if="item.children">
                    <li class="vertical-demo-content-sub"
                        v-for="(thirdItem,index) in item.children" :key="index">
                      <div
                        @click.stop="handleThirdNavClick(currentNav, currentSubNav, thirdItem.title)"
                        class="thirdTitle"
                        >{{thirdItem.title}}</div>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <left-news></left-news>
      </div>
      <div class="content-box">
        <head-title>{{ currentThirdNav || currentSubNav }}</head-title>
        <div class="page-box">
          <transition name="move" mode="out-in">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </transition>
        </div>
      </div>
    </div>
  <common-footer></common-footer>
  </div>
</template>

<script>
import CommonHeader from '@/components/header'
import LeftNews from '@/components/PageDetails/components/LeftNews'
import BreadCrumb from '@/components/BreadCrumb'
import HeadTitle from '@/components/headtitle'
import CommonFooter from '@/components/footer'

import {mapState, mapMutations} from 'vuex'
export default {
  name: 'HomeDetails',
  components: {
    CommonHeader,
    HeadTitle,
    LeftNews,
    BreadCrumb,
    CommonFooter
  },
  computed: {
    navs: function () { // 子导航的数据
      // console.log(this.currentNav, this.currentSubNav)
      let subNavs = []
      let isActive = false
      this.navItems.forEach((item) => {
        if (item.title === this.currentNav) {
          item.children.forEach((navItem) => {
            subNavs.push(navItem)
          })
        }
      })
      subNavs.forEach((item) => {
        if (item.children) {
          isActive = true
        }
      })
      // console.log(subNavs)
      return {subNavs, isActive}
    },
    ...mapState({
      currentNav: 'currentNav',
      currentSubNav: 'currentSubNav',
      currentThirdNav: 'currentThirdNav',
      navItems: 'navItems'
    })
  },
  methods: {
    handleSubNavClick (subTitle, navTitle) { // 侧边导航栏二级菜单单击事件
      this.changeSubNav({
        'subTitle': subTitle,
        'navTitle': navTitle,
        'thirdTitle': ''
      })
    },
    handleThirdNavClick (navTitle, subTitle, thirdTitle) { // 侧边导航栏三级菜单单击事件
      this.$router.push({name: thirdTitle})
      this.changeThirdNav({
        'navTitle': navTitle,
        'subTitle': subTitle,
        'thirdTitle': thirdTitle
      })
    },
    ...mapMutations(['changeSubNav', 'changeThirdNav'])
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  .content {
    width: 1398px;
    // height: 1000px;
    margin: 0 auto;
    display: flex;
    // background-color: #eee;
  .nav-box {
    width: 21%;
    // height: 1000px;
    // background-color: #ccc;
    .tac {
      width: 275px;
      margin-top: 80px;
      text-align:center;
      .title {
        background-color: #72C02C;
        border-radius: 4px 4px 0 0;
        margin-bottom: 4px;
          .titlename{
          font-size: 20px;
          font-weight: bold;
          height: 60px;
          line-height: 60px;
          color: #fff;
          }
        }
        .vertical-demo{
          .vertical-demo-container{
            width: 275px;
            padding: 0;
            margin: 0;
            .vertical-demo-content{
              width: 272px;
              font-size: 16px;
              border-left: #BBBBBB 2px solid;
              border-right: #BBBBBB 2px solid;
              border-bottom: #BBBBBB 2px solid;
              list-style-type: none;
              // height: 50px;
              text-align: center;
              line-height: 50px;
              color: #666666;
              cursor: pointer;
              .subTitle {
                transition: all .3s linear;
              }
              &:hover .subTitle{
                background-color: #72C02C;
                color: #fff;
              }
              .vertical-demo-content-sub {
                // height: 40px;
                line-height: 32px;
                list-style: circle;
                font-size: 14px;
                transition: all .3s linear;
                &:hover .thirdTitle {
                  background-color: #72C02C;
                  color: #fff;
                  transition: all .3s linear;
                }
              }
              .active {
                cursor: Default;
                background-color: #72C02C;
                color: #fff;
                border-bottom: #BBBBBB 2px solid;
              }
            }
          }
        }
      }
    }
  .content-box {
    width: 79%;
    padding: 0 25px;
    // height: 1000px;
    // background-color: pink;
  }
  .page-box {
    width: 100%;
    margin-left: 5px
    // height: 800px;
    // background-color: #ccc;
  }
  }
}
</style>
